<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript实现的具有滤镜效果的横向焦点图片轮换</title>
<style>
body {
	background: #fff;
	margin: 0px auto;
	font: 12px '宋体';
	color: #333;
	text-align: center;
	padding: 0px;
}

div {
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 0px;
	margin: 0px;
	border-right-width: 0px;
	padding: 0px;
}
img {
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 0px;
	margin: 0px;
	border-right-width: 0px;
	padding: 0px;
}

a {
	color: #333; text-decoration: none
}
a:hover {
	color: #db0010; text-decoration: underline
}
#focus {
	width: 325px;
	height: 340px;
	position: relative;	
	margin-top: 10px;
}
#au {
	filter: progid:DXImagetransform.Microsoft.Fade (duration=0.5,overlap=1.0); 
	width: 325px; 
	height: 340px;
}
#no {
	border-top: #725f4a 1px solid;
	margin-top: 0px;
	background: #000;
	line-height: 24px;
	text-align: center;
	left: 0px;
	top: 273px;
	width: 325px;
	height: 66px;
	position: absolute;
	filter: alpha(opacity=70);
	moz-opacity: 0.7;
	}
#conau {
	margin-top: 0px;
	font-weight: bold;
	font-size: 14px;
	text-align: left;
	color: #fff;
	left: 14px;
	top: 283px;
	width: 298px;	
	position: absolute;		
}

#conau a {
	color: #fff
}

#conau a:hover {
	color: #fff
}

.lunbo {
	right: 8px; position: absolute; top: 307px; height: 21px
}

.lunbo table {
	height: 21px
}

.lunbo td {
	font-weight: bold; color: #000; line-height: 12px
}

.lunbo .bg {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	width: 18px;
	line-height: 17px;
	padding-top: 4px;
	height: 17px;
	text-align: center;
	background: url(images/tu1.gif);
}

.lunbo .active {
	background-image: url(images/tu1.gif);
	width: 18px;
	line-height: 17px;
	height: 17px;
	text-align: center;
	padding: 4px 0px 0px;
}

.lunbo .bg {
	background-position: -639px -74px; color: #030100
}

.lunbo .active {
	background-position: -616px -74px; color: #a8471c
}
</style>
</head>
<body>
<div id="focus">
  <div id="au">
    <div style="display: block; "><a href="" target="_blank">
      <img height="340" src="images/黄龙.gif" width="325" /></a>
    </div>
    <div style="display: none; "><a href="" target="_blank">
      <img height="340" src="images/然乌湖.gif" width="325" /></a>
    </div>
    <div style="display: none; "><a href="" target="_blank">
      <img height="340" src="images/新路海.gif" width="325" /></a>
    </div>
    <div style="display: none; "><a href="" target="_blank">
      <img height="340" src="images/紫薇山.gif" width="325" /></a>
    </div>
  </div>
  <div id="no"></div>
  <div class="lunbo">
    <table cellspacing="0" cellpadding="0" align="right" border="0">
      <tbody>
      <tr>
        <td class="active" id="t0" onmouseover="mea(0);clearAuto();" onmouseout="setAuto();">1</td>
        <td width="6"></td>
        <td class="bg" id="t1" onmouseover="mea(1);clearAuto();" onmouseout="setAuto();">2</td>
        <td width="6"></td>
        <td class="bg" id="t2" onmouseover="mea(2);clearAuto();" onmouseout="setAuto();">3</td>
        <td width="6"></td>
        <td class="bg" id="t3" onmouseover="mea(3);clearAuto(); " onmouseout="setAuto();">4</td>
      </tr>
      </tbody>
    </table>
  </div>
  <div id="conau">
    <div style="display: block; "><a href="" target="_blank">黄龙</a></div>
    <div style="display: none; "><a href="" target="_blank">然乌湖</a></div>
    <div style="display: none; "><a href="" target="_blank">新路海</a></div>
    <div style="display: none; "><a href="" target="_blank">紫薇山</a></div>
  </div>
</div>
<script type="text/javascript"> 
  var n=0;
  function mea(value){
	n=value;
	setBg(value);
	plays(value);
	conaus(n);
	}
	  
  function setBg(value){
	for(var i=0;i<4;i++)
	  document.getElementById("t"+i+"").className="bg";
	  document.getElementById("t"+value+"").className="active";
	} 
	  
  function plays(value){
	try
	{
	  with (au){
		filters[0].apply();
		for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
		filters[0].play(); 		
	  }
	}
	catch(e)
	{
		var d = document.getElementById("au").getElementsByTagName("div");
		for(i=0;i<4;i++)i==value?d[i].style.display="block":d[i].style.display="none"; 
	}
  }
  
  function conaus(value){
	try
	{
	  with (conau){
	   for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
	  }
	}
	catch(e)
	{
	  var d = document.getElementById("conau").getElementsByTagName("div");
	  for(i=0;i<4;i++)i==value?d[i].style.display="block":d[i].style.display="none"; 
	}  
  }
  
  function clearAuto(){clearInterval(autoStart)}
  function auto(){
	n++;
	if(n>3)n=0;
	mea(n);
  } 
  function setAuto(){autoStart=setInterval("auto(n)", 4000)}  
  setAuto(); 
</script>
</body>
</html>
